type Props = {
  className?: string;
  onClick?: () => void;
};

export const SaveIcon = ({ className, onClick }: Props) => {
  return (
    <svg
      onClick={onClick || (() => {})}
      className={className}
      width="77"
      height="77"
      viewBox="0 0 77 77"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M22 8.25H17.1875C14.8171 8.25 12.5438 9.19163 10.8677 10.8677C9.19163 12.5438 8.25 14.8171 8.25 17.1875V59.8125C8.25026 62.0637 9.10004 64.2319 10.6295 65.8837C12.159 67.5355 14.2555 68.5493 16.5 68.7225V44.6875C16.5 43.0465 17.1519 41.4727 18.3123 40.3123C19.4727 39.1519 21.0465 38.5 22.6875 38.5H54.3125C55.9535 38.5 57.5273 39.1519 58.6877 40.3123C59.8481 41.4727 60.5 43.0465 60.5 44.6875V68.7225C62.7445 68.5493 64.841 67.5355 66.3705 65.8837C67.9 64.2319 68.7497 62.0637 68.75 59.8125V24.1615C68.7503 22.9874 68.5192 21.8247 68.07 20.7399C67.6208 19.6551 66.9623 18.6694 66.132 17.8392L59.1608 10.868C58.3306 10.0377 57.3449 9.37918 56.2601 8.92997C55.1753 8.48077 54.0126 8.24971 52.8385 8.25H52.25V24.0625C52.25 24.8751 52.09 25.6797 51.779 26.4304C51.4681 27.1811 51.0123 27.8632 50.4377 28.4377C49.8632 29.0123 49.1811 29.4681 48.4304 29.779C47.6797 30.09 46.8751 30.25 46.0625 30.25H28.1875C26.5465 30.25 24.9727 29.5981 23.8123 28.4377C22.6519 27.2773 22 25.7035 22 24.0625V8.25ZM48.125 8.25H26.125V24.0625C26.125 25.201 27.049 26.125 28.1875 26.125H46.0625C46.6095 26.125 47.1341 25.9077 47.5209 25.5209C47.9077 25.1341 48.125 24.6095 48.125 24.0625V8.25ZM56.375 68.75V44.6875C56.375 44.1405 56.1577 43.6159 55.7709 43.2291C55.3841 42.8423 54.8595 42.625 54.3125 42.625H22.6875C22.1405 42.625 21.6159 42.8423 21.2291 43.2291C20.8423 43.6159 20.625 44.1405 20.625 44.6875V68.75H56.375Z"
      />
    </svg>
  );
};
